<template>
  <!-- 用来放置 ECharts 图表的容器 -->
  <div id="container" style="width: 100%; height: 90vh"></div>
</template>

<script>
// 引入 echarts 和百度地图扩展
import * as echarts from "echarts";
import "echarts/extension/bmap/bmap";

export default {
  data() {
    return {
      // 图表数据：包含名称和数值
      data: [
        { name: "中国", value: 2730 },
        { name: "美国", value: 2100 },
        { name: "印度", value: 1500 },
        { name: "俄罗斯", value: 1450 },
        { name: "巴西", value: 1300 },
        { name: "德国", value: 1200 },
        { name: "日本", value: 1100 },
        { name: "加拿大", value: 900 },
        { name: "法国", value: 850 },
        { name: "英国", value: 800 },
        { name: "澳大利亚", value: 600 },
      ],

      // 地理坐标数据：每个地区的经纬度
      geoCoordMap: {
        中国: [116.46, 39.92], // 中国的经纬度
        美国: [-95.7129, 37.0902], // 美国的经纬度
        印度: [78.9629, 20.5937], // 印度的经纬度
        俄罗斯: [105.3188, 61.524], // 俄罗斯的经纬度
        巴西: [-51.9253, -14.235], // 巴西的经纬度
        德国: [10.4515, 51.1657], // 德国的经纬度
        日本: [137.4237, 35.6728], // 日本的经纬度
        加拿大: [-106.3468, 56.1304], // 加拿大的经纬度
        法国: [2.3522, 48.8566], // 法国的经纬度
        英国: [-3.43597, 55.3781], // 英国的经纬度
        澳大利亚: [133.7751, -25.2744], // 澳大利亚的经纬度
      },
    };
  },

  name: "EChartsBMapComponent", // 组件名称

  mounted() {
    // 组件挂载完成后，加载百度地图脚本并初始化图表
    this.loadBMapScript()
      .then(() => {
        this.initChart();
      })
      .catch((error) => {
        console.error("Failed to load BMap script", error);
      });
  },

  methods: {
    // 数据转换函数，将每个数据项的坐标与数值合并
    convertData(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = this.geoCoordMap[data[i].name]; // 获取对应地点的经纬度
        if (geoCoord) {
          // 合并坐标与数值，并添加到结果数组
          res.push({
            name: data[i].name, // 地点名称
            value: geoCoord.concat(data[i].value), // 经纬度 + 数值
          });
        }
      }
      return res; // 返回转换后的数据
    },

    // 加载百度地图脚本的函数
    loadBMapScript() {
      return new Promise(function (resolve, reject) {
        // 判断是否已加载百度地图
        if (typeof BMap !== "undefined") {
          resolve(BMap); // 如果已加载，直接返回
          return true;
        }
        // 如果没有加载，则通过回调加载
        window.onBMapCallback = function () {
          resolve(BMap);
        };
        // 创建并加载百度地图的脚本
        let script = document.createElement("script");
        script.type = "text/javascript";
        script.src =
          "http://api.map.baidu.com/api?v=2.0&ak=hBLAXiwWz7LcuIl5PqQtkv3IVCyQTmi5&callback=onBMapCallback";
        script.onerror = reject;
        document.head.appendChild(script);
      });
    },

    // 初始化 ECharts 图表
    initChart() {
      // 校验 BMap 是否加载成功
      if (typeof BMap === "undefined") {
        console.error("BMap 未加载");
        return;
      }

      const dom = document.getElementById("container"); // 获取容器元素
      const myChart = echarts.init(dom); // 初始化 ECharts 实例

      const option = {
        backgroundColor: "transparent", // 背景透明
        title: {
          text: "全球用户分布图 - 百度地图", // 图表标题
          left: "center", // 标题居中
          textStyle: {
            color: "#fff",
          },
        },

        tooltip: {
          trigger: "item", // 鼠标悬浮在项上时触发
        },
        bmap: {
          // 百度地图配置项
          center: [104.114129, 37.550339], // 地图中心点
          zoom: 5, // 地图缩放级别
          roam: true, // 允许平移和缩放
          mapStyle: {
            styleJson: [
              {
                featureType: "water",
                elementType: "all",
                stylers: {
                  color: "#044161",
                },
              },
              {
                featureType: "land",
                elementType: "all",
                stylers: {
                  color: "#004981",
                },
              },
              {
                featureType: "boundary",
                elementType: "geometry",
                stylers: {
                  color: "#064f85",
                },
              },
              {
                featureType: "railway",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "highway",
                elementType: "geometry",
                stylers: {
                  color: "#004981",
                },
              },
              {
                featureType: "highway",
                elementType: "geometry.fill",
                stylers: {
                  color: "#005b96",
                  lightness: 1,
                },
              },
              {
                featureType: "highway",
                elementType: "labels",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "arterial",
                elementType: "geometry",
                stylers: {
                  color: "#004981",
                },
              },
              {
                featureType: "arterial",
                elementType: "geometry.fill",
                stylers: {
                  color: "#00508b",
                },
              },
              {
                featureType: "poi",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "green",
                elementType: "all",
                stylers: {
                  color: "#056197",
                  visibility: "off",
                },
              },
              {
                featureType: "subway",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "manmade",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "local",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "arterial",
                elementType: "labels",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "boundary",
                elementType: "geometry.fill",
                stylers: {
                  color: "#029fd4",
                },
              },
              {
                featureType: "building",
                elementType: "all",
                stylers: {
                  visibility: "off", // 去除建筑物显示
                },
              },
              {
                featureType: "label",
                elementType: "all",
                stylers: {
                  visibility: "off", // 隐藏所有标签
                },
              },
            ],
          },
        },

        // 添加柱形图部分
        // grid: {
        //   top: "3hv", // 距离上侧5%
        //   left: "1hv", // 距离左侧5%
        //   width: "30%", // 设置宽度占地图的30%
        //   height: "20%", // 设置高度占地图的30%
        //   containLabel: true, // 确保标签不被裁剪
        // },

        // xAxis: {
        //   axisLine: {
        //     show: false, // 不显示x轴的线条
        //   },
        //   axisTick: {
        //     show: false, // 不显示x轴的刻度线
        //   },
        //   splitLine: {
        //     show: false, // 不显示x轴的分割线
        //   },
        //   type: "value",

        // },
        // yAxis: {
        //   type: "category",
        //   data: [
        //     "中国",
        //     "美国",
        //     "印度",
        //     "俄罗斯",
        //     "巴西",
        //     "德国",
        //     "日本",
        //     "加拿大",
        //     "法国",
        //     "英国",
        //     "澳大利亚",
        //   ],
        //   axisLabel: {
        //     color: "#fff", // 设置y轴标签颜色为白色
        //   },
        // },

        series: [
          {
            name: "用户分布", // 效果散点图名称
            type: "effectScatter", // 类型：效果散点图
            coordinateSystem: "bmap", // 使用百度地图作为坐标系
            data: this.convertData(
              this.data.sort(function (a, b) {
                return b.value - a.value; // 按值降序排序
              })
            ),
            symbolSize: function (val) {
              let size = val[2] / 100;
              if (size <= 10) {
                size = 10;
              } else if (size >= 50) {
                size = 50;
              }
              return size; // 固定大小
            },
            encode: {
              value: 2,
            },
            showEffectOn: "render", // 渲染时显示效果
            rippleEffect: {
              brushType: "stroke", // 漣漪效果
            },
            label: {
              formatter: function (params) {
                return `${params.name}: ${params.value[2]}`; // 显示名称和数值
              },

              position: "right",
              show: true,
              fontSize: 22, // 设置字体大小为 14px（你可以根据需要调整大小）
            },
            itemStyle: {
              color: "#f4e925",
              shadowBlur: 10, // 设置阴影
              shadowColor: "#333", // 阴影颜色
            },
            emphasis: {
              label: {
                show: true,
              },
              scale: true, // 放大效果
            },
            zlevel: 1, // 设置 z 层级
          },
          // {
          //   name: "国家数据",
          //   type: "bar",
          //   data: [
          //     2730, 2100, 1500, 1450, 1300, 1200, 1100, 900, 850, 800, 600,
          //   ],
          //   barWidth: "40%", // 设置柱子的宽度
          //   label: {
          //     show: true,
          //     position: "right",
          //     valueAnimation: true,
          //     color: "#fff",
          //   },
          //   itemStyle: {
          //     // color: "#f4e925", // 柱形图颜色
          //   },
          // },
        ],
      };

      // 校验数据格式，确保数据有效
      if (
        Array.isArray(option.series[0].data) &&
        option.series[0].data.length > 0
      ) {
        myChart.setOption(option); // 设置图表的配置项
      } else {
        console.error("图表数据无效或为空");
      }
    },
  },
};
</script>

<style scoped>
#container {
  width: 100%;
  height: 100%;
}
</style>
